<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="编辑资料"
    >
    </van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
      <input
        type="file"
        hidden
        @change="hChangeImage"
        ref="refInput"
      />
      <van-cell
        is-link
        title="头像"
        center
        @click="hClickImage"
      >
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="photo"
        />
      </van-cell>

      <van-cell
        is-link
        title="名称"
        :value="name"
        @click="hEditName"
      />

      <van-cell
        is-link
        title="性别"
        :value="gender === 0?'男':'女'"
        @click="isShowGender=true"
      />

      <van-cell
        is-link
        title="生日"
        :value="birthday"
        @click="isShowBirthday=true"
      />
    </van-cell-group>

    <!-- 对于上边每一项的修改，都采用相同的修改模式：
    - 弹层，点击保存 -->

    <!-- 修改名字  -->
    <van-dialog
      v-model="isShowName"
      title="修改名字"
      show-cancel-button
      @confirm="hSaveName"
    >
      <van-field v-model.trim="newName" />
    </van-dialog>

    <!-- 修改性别 -->
    <van-popup
      v-model="isShowGender"
      position="bottom"
    >
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="isShowGender=false"
      >
      </van-nav-bar>
      <van-cell
        title="男"
        @click="hSaveGender(0)"
        is-link
      ></van-cell>
      <van-cell
        title="女"
        @click="hSaveGender(1)"
        is-link
      ></van-cell>
    </van-popup>

    <!-- 修改生日 -->
    <van-popup
      v-model="isShowBirthday"
      position="bottom"
    >
      <van-nav-bar title="修改生日">
      </van-nav-bar>
      <!-- type： 日期类型
        @cancel: 取消
        @confirm: 确认
      -->
      <van-datetime-picker
        v-model="newDate"
        type="date"
        title="选择年月日"
        @cancel="isShowBirthday=false"
        @confirm="hSaveBirthday"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
import { formatDate } from '@/utils/tools.js'
import { mapState } from 'vuex'
import { updateUserInfo, updateUserPhoto } from '@/api/user'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      isShowName: false,
      isShowGender: false,
      isShowBirthday: false,

      // 当前用户的信息
      user: { name: '张三' },

      // 修改后的新名字
      newName: '',
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-picker中最小时间
      maxDate: new Date() // 当前时间
    }
  },
  computed: {
    ...mapState('userInfo', ['name', 'birthday', 'gender', 'id', 'photo'])
  },
  methods: {
    // 用户在头像上点击，希望也弹出文件选择框
    // 用户点击了头像： 理解他要更新头像，此时 弹出input type="file"
    hClickImage () {
      // 找到这个引用，并直接调用click()
      this.$refs.refInput.click()
    },
    async hChangeImage (e) {
      console.log(e)
      // 获取用户当前选中的图片
      const file = e.target.files[0]
      // 没有选中图片，返回
      if (!file) {
        return
      }
      console.log('当前用户选中的图片文件是', file)
      // 调用接口，上传这张图片
      const fd = new FormData()
      fd.append('photo', file)
      const res = await updateUserPhoto(fd)
      console.log(res)
      // 保存结果
      this.$store.commit('userInfo/mUpdateUserPhoto', res.data.data.photo)
      this.$toast.success('头像修改成功')
    },
    // 保存生日
    async hSaveBirthday () {
      console.log(this.newDate)
      // 组件中提供的时间是标准时间，后端接口中需要是年-月-日的格式，
      // 要进行转换
      const birthday = formatDate(this.newDate)
      try {
        const res = await updateUserInfo({ birthday })
        console.log(res)
        // 1. 更新到vuex中
        this.$store.commit('userInfo/mUpdateUserBirthday', birthday)
        // 2. 关闭弹层
        this.isShowBirthday = false
      } catch (err) {
      }
    },
    // 修改性别
    async hSaveGender (newgender) {
      try {
        const result = await updateUserInfo({ gender: newgender })
        console.log(result)
        // 在本地更新vuex
        this.$store.commit('userInfo/mUpdateGender', newgender)
        this.$toast.success('操作成功')
        this.isShowGender = false
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
    },
    // 修改姓名
    hEditName () {
      this.newName = this.name
      this.isShowName = true
    },
    // 修改姓名
    async hSaveName () {
      if (this.newName === '') {
        return
      }
      // 调用接口，保存名字
      const { newName } = this
      if (newName === '') {
        return
      }
      try {
        const res = await updateUserInfo({ name: newName })
        console.log(res)
        // 成功
        // 1. 更新数据到vuex
        // 由于useInfo是一个独立的modules，所以在做commit时，要加上模块名
        this.$store.commit('userInfo/mUpdateUserName', this.newName)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
